<style lang="less">
  .el-collapse-item {
    border: 1px solid #dfe6ec;
    margin-bottom: 10px;
    .el-collapse-item__wrap {
      height: 100%;
      .el-radio-group {
        margin-left: 30px;
      }
    }
  }

  .f-w10 {
    width: 10%;
  }

  .f-w30 {
    width: 30%;
  }

  .f-sy {
    margin-top: 10px;
    margin-left: 10px;
  }
</style>

<template>
  <div>
    <div class="el-collapse-item">
      <div class="el-collapse-item__header">
        重抛比配置
      </div>
      <div class="el-collapse-item__wrap">
        <el-form class="f-sy" ref="stmHeavyRatioForm" :model="stmHeavyRatioForm" :rules="rules">
          <el-form-item label="请设置重泡比区间">
            <el-col :span="3">
              <el-form-item prop="minimum">
                <el-input type="number" v-model.number="stmHeavyRatioForm.minimum"></el-input>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2"> ≤体积/重量≤ </el-col>
            <el-col :span="3">
              <el-form-item prop="maximum">
                <el-input type="number" v-model.number="stmHeavyRatioForm.maximum"></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="是否限制运输方式">
            <template>
              <el-radio-group v-model="stmHeavyRatioForm.isPricingExpress" @change="changeText">
                <el-radio :label="111002001">只限定定价快运</el-radio>
                <el-radio :label="111002002">不限</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
          <div v-if="stmHeavyRatioForm.isPricingExpress===111002002">
            <el-form-item label="注：若不限运输方式，选择的涨幅对象金额需乘以设置的涨幅比例"></el-form-item>
            <el-form-item label="请设置价格涨幅比例" prop="priceIncreaseRatio">
              <el-input class="f-w10" type="number" v-model.number="stmHeavyRatioForm.priceIncreaseRatio"></el-input>
            </el-form-item>
            <el-form-item label="*选择涨幅对象">
              <template>
                <el-checkbox v-model="stmHeavyRatioForm.isPickUpCharge" :true-label="111002001"
                             :false-label="111002002">提货费
                </el-checkbox>
              </template>
              <template>
                <el-checkbox v-model="stmHeavyRatioForm.isTrunkFreight" :true-label="111002001"
                             :false-label="111002002">干线运输费
                </el-checkbox>
              </template>
              <template>
                <el-checkbox v-model="stmHeavyRatioForm.isDeliveryCharges" :true-label="111002001"
                             :false-label="111002002">送货费
                </el-checkbox>
              </template>
            </el-form-item>
          </div>
          <el-form-item label="请设置在此范围内时的提示文案" prop="promptCopy">
            <br>
            <el-input type="textarea" class="f-w30" :rows="5" v-model="stmHeavyRatioForm.promptCopy"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="update">更新</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import {
  updateStmHeavyRatioInterval,
  getStmHeavyRatio
} from '../../api/system/StmHeavyRatio';

export default {
  data () {
    return {
      stmHeavyRatioForm: {
        id: '',
        minimum: '',
        maximum: '',
        promptCopy: '',
        promptCopyBack: '',
        isPricingExpress: '',
        isPricingExpressBack: '',
        priceIncreaseRatio: '',
        isPickUpCharge: '',
        isTrunkFreight: '',
        isDeliveryCharges: ''
      },
      rules: {
        minimum: [
          {required: true, type: 'number', message: '请输入最小区间', trigger: 'blur'}
        ],
        maximum: [
          {required: true, type: 'number', message: '请输入最大区间', trigger: 'blur'}
        ],
        priceIncreaseRatio: [
          {required: true, type: 'number', message: '请输入价格涨幅比例', trigger: 'blur'}
        ],
        promptCopy: [
          {required: true, message: '请输入提示文案', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    changeText (val) {
      if (val === this.stmHeavyRatioForm.isPricingExpressBack) {
        this.stmHeavyRatioForm.promptCopy = this.stmHeavyRatioForm.promptCopyBack;
      } else {
        if (val === 111002001) {
          this.stmHeavyRatioForm.promptCopy = '尊敬的客户，重抛比在3.2-4.6范围内的为重抛货，无法按照标准价格结算，结算方式需选择定价快运，自行输入价格。';
        } else if (val === 111002002) {
          this.stmHeavyRatioForm.promptCopy = '尊敬的客户，重抛比在3.2-4.6范围内的为重抛货，运费将会涨幅20%，请知悉。';
        }
      }
    },
    init () {
      getStmHeavyRatio({
        filters: '',
        sort: '',
        page: 0,
        size: 1
      }).then((res) => {
        if (res.status === 200) {
          this.stmHeavyRatioForm = res.data[0];
          // this.stmHeavyRatioForm.promptCopyBack = res.data.obj.promptCopy;
          // this.stmHeavyRatioForm.isPricingExpressBack = res.data.obj.isPricingExpress;
        }
      });
    },
    update () {
      this.$refs['stmHeavyRatioForm'].validate((valid) => {
        if (valid) {
          updateStmHeavyRatioInterval(this.stmHeavyRatioForm).then((res) => {
            if (res.status === 201) {
              this.$message.success('更新成功');
              this.stmHeavyRatioForm = res.data;
              // this.stmHeavyRatioForm.promptCopyBack = res.data.obj.promptCopy;
              // this.stmHeavyRatioForm.isPricingExpressBack = res.data.obj.isPricingExpress;
            }
            ;
          }).catch(function (error) {
            this.$message.error('更新失败:' + error);
          });
        }
      });
    }
  },
  // 初始化数据
  mounted () {
    this.init();
  }
};
</script>
